<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>添加学生</title>
    <link rel="stylesheet" href="{% static './layui/css/layui.css' %}">
  <style>
    body{
      padding: 50px;
    }
  </style>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required value="{{name}}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>

    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-inline">
            <div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上传图片</button>
 <div class="layui-upload-list">
  <img class="layui-upload-img" id="demo1" width="100px" height="100px" src="{{image}}">
<!--  <p id="demoText"></p>-->
 <input type="hidden" id="demoText" name="img" value="{{image}}">
 </div>
 <div style="width: 95px;">
  <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
   <div class="layui-progress-bar" lay-percent=""></div>
  </div>
 </div>
</div> <a name="list-progress"> </a>
        </div>
    </div>


  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" value="{{password}}" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">请输入至少6位密码</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" {% if gender == '男' %} checked="" {% endif %} >
      <input type="radio" name="sex" value="女" title="女"
            {% if gender == '女' %}
                    checked=""
              {% endif %}
      >
      <input type="radio" name="sex" value="保密" title="保密"
             {% if gender == '保密' %}
                    checked=""
              {% endif %}
      >
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">户籍选择</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required" id="city">
        <option value=""></option>
        <option value="0" {% if address == '广东省' %} selected {% endif %} >广东省</option>
        <option value="1" {% if address == '湖南省' %} selected {% endif %} >湖南省</option>
        <option value="2" {% if address == '广西壮族自治区' %} selected {% endif %} >广西壮族自治区</option>
        <option value="3" {% if address == '江西省' %} selected {% endif %} >江西省</option>
        <option value="4" {% if address == '湖北省' %} selected {% endif %}>湖北省</option>
        <option value="5" {% if address == '香港' %} selected {% endif %} >香港</option>
        <option value="6" {% if address == '澳门' %} selected {% endif %}>澳门</option>
        <option value="7" {% if address == '台湾省' %} selected {% endif %}>台湾省</option>
        <option value="8">国外</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">签名</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入您的签名" class="layui-textarea">{{sign}}</textarea>
    </div>
  </div>
    <input type="hidden" name="id" value="{{id}}">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
<script src="{% static './layui/layui.js' %}"></script>
<script src="{% static './jquery-3.7.1.min.js' %}"></script>
<script>
//Demo
layui.use(['upload', 'form','element'], function(){
  var $ = layui.jquery,
  form = layui.form,
  element = layui.element,
  upload = layui.upload;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    var city = $('#city option:selected').text()
    $.ajax({
        url:"{% url 'index:student_edit_api' %}",
        data: {
            "name":data.field.username,
            "password":data.field.password,
            "gender":data.field.sex,
            "address":city,
            "sign":data.field.desc,
            "image":data.field.img,
            "id":data.field.id,
        },
        type: 'POST',
        success:function(result){
            // alert(111)
            // 缺失逻辑，成功之后很明显，要关闭弹窗，
            // 同时刷新table数据表格
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
            parent.layui.table.reload('test')
        }
    });
    return false;
  });

    //常规使用 - 普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '{% url "index:upload_img" %}' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });

      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功的一些操作
      //……
      console.log(res.filepath)
      // $('#demoText').html(res.filepath); //置空上传失败的状态
      $('#demoText').val(res.filepath); //置空上传失败的状态
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    //进度条
    ,progress: function(n, elem, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
});
</script>
</html>
